<template>
  <div class="home">
    <div class="timeline" id="timeline">
      <n-timeline :icon-size="10" size="large">
        <n-timeline-item content="Nice! 64 posts in total. Keep on posting." />
        <!-- <n-timeline-item content="2022" style="font-size:20px;" /> -->
        <div v-for="(item, index) in timeData.timeList" :key="index">
          <n-timeline-item class="year" :content="item.year" />
          <n-timeline-item @click="toDetail(yitem.content)" v-for="(yitem, yindex) in item.yearTimeList" :key="yindex" :content="yitem.content"
            :time="yitem.time" :line-type="yitem?.dashed">
          </n-timeline-item>
        </div>
        <n-space v-show="posting" style="justify-content: center;">
            <n-spin size="small" />
        </n-space>
      </n-timeline>
    </div>
    <!-- <div class="pag">
      <n-space vertical>
        <n-pagination v-model:page="currentpage" :page-count="timeData.totalPage" :page-slot="4" />
      </n-space>
    </div> -->
  </div>
</template>

<script setup lang='ts'>
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NTimeline, NTimelineItem } from 'naive-ui'


const router = useRouter() 

let currentpage = ref<number>(1)
let posting = ref<boolean>(false)

type YearTimeList = {
  content: string,
  time: string,
  dashed?: 'default' | 'dashed'
}
type TimeList = {
  year: string | undefined,
  yearTimeList: YearTimeList[]
}
type TimeData = {
  totalPage: number,
  page: number,
  timeList: TimeList[]
}

let timeData: TimeData = ref({
  totalPage: 6,
  page: 1,
  timeList: [
    {
      year: '2022',
      yearTimeList: [
        { content: 'NexT 8.12.3 Released', time: '04-03' },
        { content: 'NexT 8.12.2 Released', time: '04-03' },
        { content: 'NexT 8.12.1 Released', time: '04-03' },
        { content: 'NexT 8.11.1 Released', time: '04-03' },
        { content: 'NexT 8.11.0 Released', time: '04-03' },
        { content: 'NexT 8.10.1 Released', time: '04-03' },
        { content: 'NexT 8.10.0 Released', time: '04-03' },
        { content: 'NexT 8.9.0 Released', time: '04-03' },
        { content: 'NexT 8.10.0 Released', time: '04-03', dashed: 'dashed' }
      ]
    },
    {
      year: '2021',
      yearTimeList: [
        { content: 'NexT 8.8.1 Released', time: '04-03' },
        { content: 'NexT 8.12.2 Released', time: '04-03' },
        { content: 'NexT 8.12.1 Released', time: '04-03' },
        { content: 'NexT 8.11.1 Released', time: '04-03' },
        { content: 'NexT 8.11.0 Released', time: '04-03' },
        { content: 'NexT 8.10.1 Released', time: '04-03' },
        { content: 'NexT 8.10.0 Released', time: '04-03' },
        { content: 'NexT 8.9.0 Released', time: '04-03' },
        { content: 'NexT 8.10.0 Released', time: '04-03', dashed: 'dashed' }
      ]
    }
  ]
})


const getList = () => {
   let data = ({
    totalPage: 6,
    page: 2,
    timeList: [{
      year: '2020',
      yearTimeList: [
        { content: 'NexT 8.12.3 Released', time: '04-03' },
        { content: 'NexT 8.12.2 Released', time: '04-03' },
        { content: 'NexT 8.12.1 Released', time: '04-03' },
        { content: 'NexT 8.11.1 Released', time: '04-03' },
        { content: 'NexT 8.11.0 Released', time: '04-03' },
        { content: 'NexT 8.10.1 Released', time: '04-03' },
        { content: 'NexT 8.10.0 Released', time: '04-03' },
        { content: 'NexT 8.9.0 Released', time: '04-03' },
        { content: 'NexT 8.10.0 Released', time: '04-03', dashed: 'dashed' }
      ]
    },
    {
      year: '2019',
      yearTimeList: [
        { content: 'NexT 8.8.1 Released', time: '04-03' },
        { content: 'NexT 8.12.2 Released', time: '04-03' },
        { content: 'NexT 8.12.1 Released', time: '04-03' },
        { content: 'NexT 8.11.1 Released', time: '04-03' },
        { content: 'NexT 8.11.0 Released', time: '04-03' },
        { content: 'NexT 8.10.1 Released', time: '04-03' },
        { content: 'NexT 8.10.0 Released', time: '04-03' },
        { content: 'NexT 8.9.0 Released', time: '04-03' },
        { content: 'NexT 8.10.0 Released', time: '04-03', dashed: 'dashed' }
      ]
    }
    ]
  })
  // Object.assign(timeData, data)
  timeData.value.timeList = [...timeData.value.timeList,  ...data.timeList]
}

const toDetail = (id: string) => {
  router.push({name: `detail`, params: {id}})
}

const lazyLoad = () => {
  window.addEventListener('scroll', (e) => {
    const timeline = document.getElementById('timeline') 

    if ((document.documentElement.scrollTop+document.documentElement.clientHeight > timeline?.getBoundingClientRect().height - 100 )
      && !posting.value) {
      // console.log(Math.abs(timeline?.getBoundingClientRect().y), (timeline?.getBoundingClientRect()));
      posting.value = true
      setTimeout(() => {
        getList()
        posting.value = false
      }, 1500)
    }
  })
}

onMounted(() => {
  lazyLoad()
})
</script>

<style lang="scss" scoped>
.home {
  
  .timeline {
    background-color: var(--theme-content-color);
    width: 100%;
    padding: 40px;

    ::v-deep .n-timeline {

      .n-timeline-item:nth-child(1) {
        height: 100px;
      }

      .n-timeline-item:nth-child(1) {
        .n-timeline-item-content {
          .n-timeline-item-content__content {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }

      .n-timeline-item {
        height: 50px;
        cursor: pointer;

        &:last-child {
          .n-timeline-item-timeline__line {
            display: block;
          }
        }

        &:hover {
          .n-timeline-item-content {
            &::before {
              border-color: #000;
            }
          }

          .n-timeline-item-timeline__circle {
            background-color: #000;
          }
        }

        .n-timeline-item-content {
          display: flex;
          flex-direction: row-reverse;
          justify-content: flex-end;
          align-items: flex-start;
          position: relative;

          &::before {
            content: "";
            position: absolute;
            left: -17px;
            bottom: 0;
            width: 100%;
            border-bottom: 1px dotted rgb(184, 184, 184);
          }

          .n-timeline-item-content__meta {
            margin: 0 10px 0 0;
          }
        }
      }
    }
  }

  .pag {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #fff;
    display: flex;
    justify-content: center;
  }
}
</style>